<template>
	<view style="background: #f5f5f9;">
		<scroll-view class="scroll-view" scroll-y @scrolltolower="queryPage()">
			<view class="c-box">
				<view id="tagNewsList">
					<!--轮播图-->
					<view v-show="TagBannerList.length > 0" class="indexBanner" style="margin: 14rpx 14rpx 0 14rpx;">
						<view class="banner">
							<view class="swiper-bannerContainer" id="banner">
								<view class="swiper-wrapper">
									<view class="swiper-slide" v-for="item in TagBannerList">
										<view class="a">
											<image mode="widthFix" :src="item.img" style="border-radius: 14rpx;"/>
										</view>
									</view>
								</view>
								<view class="swiper-pagination"></view>
							</view>
						</view>
					</view>
					<view style="background-color: #EBEBEB">
						<view class="p" style=" margin-top: 0; font-size: 28rpx; text-align: center;height:140rpx;line-height:140rpx;">{{'#'+tagName}}</view>
					</view>
					<!--swiper 产品、动态、视频-->
					<view style="background-color: white;">
						<!--顶部导航栏-->
						<view class="swiper-container is_fixed" id="swiper-switch">
							<view class="swiper-wrapper">
								<view class="swiper-slide" @click="activeIndex=0" :class="activeIndex == 0 ? 'active' : 'switch-slide'" style="width: 25%">产品({{productListSearch.totalCount}})</view>
								<view class="swiper-slide" @click="activeIndex=1" :class="activeIndex == 1 ? 'active' : 'switch-slide'" style="width: 25%">动态({{newsSearch.totalCount}})</view>
								<view class="swiper-slide" @click="activeIndex=2" :class="activeIndex == 2 ? 'active' : 'switch-slide'" style="width: 25%">视频({{videoSearch.totalCount}})</view>
								<view class="swiper-slide" @click="activeIndex=3" :class="activeIndex == 3 ? 'active' : 'switch-slide'" style="width: 25%">需求({{demandSearch.totalCount}})</view>
							</view>
						</view>
						<!--列表页面-->
						<view class="swiper-container connaught-style" id="swiper-list" ref="swiperList">
							<view class="swiper-wrapper">
								<!--产品模块-->
								<view class="swiper-slide" v-if="activeIndex == 0">
									<view class="main" >
										<view class="ul" v-if="productList.length>0">
											<view class="li" v-for="product in productList">
												<view class="a" @click="goDetail(product.id)">
													<view class="img" style="position:relative;">
														<!-- 展会标签-->
														<view v-if="product.exhibitionList != null && product.exhibitionList.length > 0" class="tit-a" v-for="(ee,index) in product.exhibitionList"  style="width: 60%;position: absolute;top: 0;right: 0;" :style="{background: getProductFontBackgroundColor(product)}">
															{{product.exhibitionList[0].exhibitionShortName}}
														</view>
														<view class="tit-b" v-if="product.newTag == 1">新上架</view>
														<image mode="widthFix"  :src="product.banarImg"/>
													</view>
													<view class="main-a">
														<view class="top">
															<view class="h2" style="display: flex;">
																<view class="top-a span" v-show="product.isNewProduct == 1">新品</view>
																<view class="top-b span" v-show="product.samplebookId != 0">样册</view>
																<view class="top-c span">{{product.tradeName}}</view>
															</view>
														</view>
														<view class="bottom">	
															<view  class="span" style="font-size: 29rpx;display: flex;"><view class="em">¥</view>{{product.price}}</view>
														</view>
			
													</view>
												</view>
											</view>
											<view class="hint" v-show="productLine.noMore">我是有底线的</view>
											<view class="hint" v-show="productLine.loading">加载中...</view>
											<view class="hint" v-show="productLine.noData">暂无数据</view>
										</view>
										<view v-else  class="hint">暂无相关产品</view>
									</view>
								</view>
								<!--动态模块-->
								<view class="swiper-slide" v-else-if="activeIndex == 1">
									<custom-waterfalls-flow ref="waterfallsFlowRef" @imageClick="toDetail" :columnSpace="1.5" :key="3"  :value="newsList"  @loaded="loadImg">
										<view class="fall-item" v-for="(item,index) in newsList" :key="index" slot="slot{{index}}">
											<view class="a" @click="goDetail(item.id)">
												<view class="item-title1">{{item.title}}
												</view>
											</view>
											<view class="play-comment1">
												<view style="font-size: 12px;width: 60%;float: left">
													<image mode="widthFix" :src="item.author.portrait?item.author.portrait:'https://m.nocexpo.com/statics/js/modules/h5/img/wutouxiang.png'" style="border-radius: 50%"/>{{item.author.userName}}
												</view>
												<view v-if="item.like == 0" style="font-size: 12px;width: 20%;text-align: right;float: right;margin-right: 14rpx">
													<image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/zan0.png" @tap.stop="giveLike(item.id,index,1)" />{{item.likeCount}}
												</view>
												<view v-else="item.like == 1" style="font-size: 12px;width: 20%;text-align: right;float: right;margin-right: 14rpx">
													<image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/zan1.png"  @tap.stop="cancelLike(index,item.collectId,1)" />{{item.likeCount}}
												</view>
											</view>
										</view>
									</custom-waterfalls-flow>
									<view class="hint" v-show="newsLine.loading">加载中...</view>
									<view class="hint" v-show="newsLine.noMore">我是有底线的</view>
								</view>
								<!--视频模块-->
								<view class="swiper-slide" v-else-if="activeIndex == 2">
									<view class="slide3">
										<view class="sp-module" v-if="videoList.length>0">
										<custom-waterfalls-flow @imageClick="toDetail" ref="waterfallsFlowRef" :columnSpace="1.5" :key="4"  :value="videoList" @loaded="loadImg">
											<view class="item" v-for="(item,index) in videoList" :key="index" slot="slot{{index}}">
												<view class="a" @click="goDetail(item.id)">
													<view class="date">{{item.videoDuration}}</view>
													<view class="item-title1" style="margin-bottom: 9rpx;">{{item.videoTitle}}</view>
													<view class="play-comment">
														<view><image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon105.png" />{{item.browseCount}}</view>
														<view><image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon104.png" />{{item.commentCount}}</view>
													</view>
												</view>
											</view>
										</custom-waterfalls-flow>
											<view class="hint" v-show="videoLine.noMore">我是有底线的</view>
											<view class="hint" v-show="videoLine.loading">加载中...</view>
											<view class="hint" v-show="videoLine.noData">暂未上传视频</view>
										</view>
										<view v-else  class="hint">暂无相关视频</view>
									</view>
								</view>	
								<!--需求模块-->
								<view class="swiper-slide" v-else-if="activeIndex == 3">
									<view>
										<view class="demandList" style="margin-top: 35rpx">
											<view class="ul">
												<view class="li" v-for="demand in demandList" style="position: relative">
													<view class="a" @click="goDetail(demand.id)" >
														<view class="mt" style="margin-left: 15px;">
															 <view class="span" v-show="demand.ifPurchase == 1" style="border-radius: 3px 10px 10px 0; width: 45px; height: 37rpx;line-height: 37rpx;background-color: red;text-align: center;color: #fff">
																已采购
															</view>
															<image mode="widthFix" style="margin-top: 0" v-show="demand.ifAttestation  == 1" class="attestation" src="https://m.nocexpo.com/statics/js/modules/h5/img/attestation.png"/>
															<view class="hot span" v-show="demand.ifRecommend == 1">Hot</view>
															<view class="nowrap h2">寻求:{{demand.title}}</view>
															<view class="em"></view>
														</view>
														<view class="mc" style="margin-left: 15px;">
															<view @click="goTagNews(item)" class="tag-item" v-for="(item,index) in demand.tagList" v-show="index<3">
																<view class="tag-item-text">
																	{{'#'+item.tagName}}
																</view>
															</view>
															<view class="em">详情</view>
														</view>
														<view class="mb" style="margin-left: 15px;">
															<view class="span">{{demand.browseCount}}浏览 · {{demand.colCount}}收藏</view>
															<view class="em">{{demand.createAt}}</view>
														</view>
													</view>
												</view	>
											</view>
										</view>
										<view class="hint" v-show="demandLine.loading">加载中...</view>
										<view class="hint" v-show="demandLine.noMore">我是有底线的</view>
										<view class="hint" v-show="demandLine.noData">没有数据</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>	
	</view>
</template>

<script>
	import tagApi from '@/api/tagNewsList.js';
	import commonApi from '@/utils/commonMethod.js';
	export default {
		data() {
			return {
				currentUser: [],
				tagName:'',
				activeIndex:1,//默认标签页
				//视频
				videoList: [],
				videoList1:[],
				videoList2:[],
				videoSearch: {
					page: 1,
					limit: 10,
					lastpage: 0,
					totalPage: '',
					totalCount: '',
					tagType:2,//标签类型，2是视频标签
					tagId:0,
					search:''
				},
				videoLine: {
					loading: false,//正在加载
					noMore: false,//没有更多数据
					noData: false,//没有数据
				},
				//产品
				productList:[],
				productListSearch:{
					page:1,
					limit:10,
					totalPage: '',
					totalCount: '',
					tagType:4,//标签类型，4是产品标签
					tagId:0
				},
				productLine: {
					loading: false,//正在加载
					noMore: false,//没有更多数据
					noData: false,//没有数据
				},
				//动态
				newsList: [],
				newsList1: [],
				newsList2: [],
				newsSearch: {
					page: 1,
					limit: 10,
					totalPage: '',
					totalCount: '',
					tagType:1,//标签类型，1是动态标签
					tagId:0,
				},
				newsLine: {
					loading: false,//正在加载
					noMore: false,//没有更多数据
					noData: false,//没有数据
				},
				//产品
				demandList:[],
				demandSearch:{
					page:1,
					limit:10,
					totalPage: '',
					totalCount: '',
					tagType:5,//标签类型，5是产品需求
					tagId:0
				},
				demandLine: {
					loading: false,//正在加载
					noMore: false,//没有更多数据
					noData: false,//没有数据
				},
				newsScroll:0,
				productScroll:0,
				videoScroll:0,
				demandScroll:0,
				TagBannerList: [] ,//标签轮播图
				
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
			}
		},
		async onLoad(options) {
			this.getTagName(options.tagId);
			this.getTagBanner(options.tagId);
			//获取当前用户
			await commonApi.currentUserAxios().then(res =>{
				this.currentUser = res.data.session_user_h5
			})
			
			this.activeIndex = options.activeIndex;//判断从哪个模块点击进入
			if(this.activeIndex == 0){//bug未修复，暂时采用此方式
				this.activeIndex = 0;
			}
			this.videoSearch.tagId = options.tagId;
			this.productListSearch.tagId = options.tagId;
			this.newsSearch.tagId = options.tagId;
			this.demandSearch.tagId = options.tagId;
			var self = this;
			this.queryVideo();
			this.queryProduct();
			this.getNewsList();
			this.getDemand();
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath
		},
		onShow(){
  
		  setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
			  getApp().globalData.onShow = 0;
			  console.log("demo前后台切换之切到前台")
			}
			else {
			  console.log("demo页面被切换显示")
			  this.startTime = +new Date();
			}
			
		  }, 100);
		},
		onHide(){
		  setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
			  getApp().globalData.onHide = 0;
			  console.log("还在当前页面活动")
			}
			else {
			  that.endTime = +new Date();
			  console.log("demo页面停留时间：" + (that.endTime - that.startTime))
			  var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		  }, 100)
		},
		onUnload(){
			setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
			  getApp().globalData.onHide = 0;
			  console.log("还在当前页面活动")
			}
			else {
			  that.endTime = +new Date();
			  console.log("demo页面停留时间：" + (that.endTime - that.startTime))
			  var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		  }, 100)
		},
		methods:{
			saveFootPrint(stayTime){
			    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"标签页面")
			        
			},
			goTagNews(item) {
				uni.navigateTo({
					url:'/pages/product/tag/tagNewsList?activeIndex=3&tagId=' + item.id,
					
				})
				// window.location.href = '/h5/tagNewsList.html?activeIndex=3&tagId=' + item.id;
			},
			getDemand() {
				tagApi.getDemand(this.demandSearch.page,this.demandSearch.limit,this.demandSearch.tagType,this.demandSearch.tagId).then(res => {
					this.demandSearch.totalCount = res.data.page.total;
					this.demandSearch.totalPage = res.data.page.totalPage;
					if(res.data.page.list.length<10){
						this.demandLine.noMore = true
					}
					
					this.demandList = [...this.demandList, ...res.data.page.list];
				})
			},
			/**
			 * 查询视频
			 */
			queryVideo() {
				commonApi.getVideoList(this.videoSearch).then(res => {
					this.videoSearch.totalCount = res.data.page.totalCount
					this.videoSearch.totalPage = res.data.page.totalPage
					if(res.data.page.list.length<10){
						this.videoLine.noMore = true
					}
					
					this.videoList = [...this.videoList, ...res.data.page.list]
					console.log("videoList");
					console.log(this.videoList);
					this.videoList.forEach((value, index, array) => {
						if (value.videoDuration) {
							value.videoDuration = value.videoDuration.slice(-8)
							if (value.videoDuration.length == 8) {
								let timeArray = value.videoDuration.split(':')
								if (timeArray[0] == '00') {
									timeArray[0] = ''
								} else if (timeArray[0].slice(0, 1) == '0') {
									timeArray[0] = timeArray[0].slice(1) + ':'
								} else {
									timeArray[0] = timeArray[0] + ':'
								}
								value.videoDuration = timeArray[0] + timeArray[1] + ':' + timeArray[2]
							}
						}
					})
				})
			},
			
			/*
			* 查询动态
			* */
			getNewsList() {
				commonApi.getNews(this.newsSearch).then(res => {
					this.newsSearch.totalCount = res.data.page.totalCount;
					this.newsSearch.totalPage = res.data.page.totalPage;
					if(res.data.page.list.length < 10){
						this.newsLine.noMore = true
					}
					for (var i = 0; i < res.data.page.list.length; i++) {
						res.data.page.list[i].coverImg = res.data.page.list[i].pictureUrl.split(',')[0];
						
						// 用户名超过6字符用...代替
						if(res.data.page.list[i].author.userName != null){
							if(res.data.page.list[i].author.userName.length > 6){
								res.data.page.list[i].author.userName = res.data.page.list[i].author.userName.substring(0,6);
							}
						}
					}	
					this.newsList = [...this.newsList, ...res.data.page.list]
					
				})
			},
			/*
			* 查询产品
			* */
			queryProduct() {
				tagApi.queryProduct(this.productListSearch.page,this.productListSearch.limit,this.productListSearch.tagType,this.productListSearch.tagId).then(res => {
					this.productListSearch.totalCount = res.data.page.totalCount
					this.productListSearch.totalPage = res.data.page.totalPage
					if(res.data.page.list.length<10){
						this.productLine.noMore = true
					}
					this.productList = [...this.productList, ...res.data.page.list]
					this.productList.forEach((value, index, array) => {
						if (value.banarImg) {
							value.banarImg = value.banarImg.split(',')[0]
						}
						value.ifUpdateName = false
						if (value.price == 0) {
							value.price = '询价'
						}else{
							value.price = commonApi.handlePrice(value.price)
						}
					})
				})
			},
			/*
			* 滑动查询分页
			* */
			queryPage() {
				//产品
				if(this.activeIndex==0){
					if (this.productListSearch.page < this.productListSearch.totalPage || !this.productListSearch.totalPage) {
						this.productListSearch.page++
						this.queryProduct()
					} else {
						this.productLine.noMore = true
					}
				}
				//动态
				if(this.activeIndex==1){
					if (this.newsSearch.page < this.newsSearch.totalPage || !this.newsSearch.totalPage) {
						this.newsSearch.page++
						this.getNewsList()
					} else {
						this.newsLine.noMore = true
					}
				}
				//视频
				if(this.activeIndex==2){
					//判断是不是最后一页
					if (this.videoSearch.page < this.videoSearch.totalPage || !this.videoSearch.totalPage) {
						this.videoSearch.page++
						this.queryVideo()
					} else {
						//已经到了视频最后一页
						this.videoLine.noMore = true
					}
				}
				//需求
				if(this.activeIndex==3){
					if (this.demandSearch.page < this.demandSearch.totalPage || !this.demandSearch.totalPage) {
						this.demandSearch.page++
						this.getDemand()
					} else {
						this.demandLine.noMore = true
					}
				}
			},
			toDetail(item){
				if(this.activeIndex == 1){//动态
					uni.navigateTo({
						url: '/pages/product/imageText/imageText?id=' + item.id
					})
				}else if(this.activeIndex == 2){//视频
					uni.navigateTo({
						url: '/pages/product/vidoDetail/vidoDetail?id=' + item.id
					})
				}
			},
			goDetail(id){
				
				console.log("goDetail");
				console.log(id);
				if(this.activeIndex == 0){//产品
					uni.navigateTo({
						url: '/pages/product/productDetail/productDetail?productId=' + id
					})
				}else if(this.activeIndex == 1){//动态
					uni.navigateTo({
						url: '/pages/product/imageText/imageText?id=' + id
					})
				}else if(this.activeIndex == 2){//视频
					uni.navigateTo({
						url: '/pages/product/vidoDetail/vidoDetail?id=' + id
					})
				}else if(this.activeIndex == 3){//需求
					uni.navigateTo({
						url: '/pages/need/detail/detail?demandId=' + id
					})
				}
			},
			giveLike(id, index, dataType) {
				if (this.currentUser.type == 3) {
					uni.redirectTo({
						url: '/pages/account/login/login'
					})
				} else {
					tagApi.saveCollect(this.currentUser.id,id).then((res) => {
						if (res.data.code == 0) {
							this.newsList[index].like = 1;
							this.newsList[index].likeCount = this.newsList1[index].likeCount + 1;
							this.newsList[index].collectId = res.data.collection.id;
							
						}
					})
				}
			},
			cancelLike(index, collectId, dataType) {
				tagApi.cancelCollect(collectId).then((res) => {
					this.newsList[index].like = 0;
					this.newsList[index].likeCount = this.newsList1[index].likeCount - 1;
					
				})
			},
			getTagName(id){
				tagApi.getTagName(id).then(res => {
					uni.setNavigationBarTitle({
						title: res.data.tagVo.tagName
					})
					this.tagName = res.data.tagVo.tagName;
				})
			},
			goTagNews(item) {
				uni.navigateTo({
					url: '/pages/product/tag/tagNewsList?activeIndex=3&tagId=' + item.id
				})
			},
			getTagBanner(id) {
				tagApi.getTagBanner(id).then(res => {
					this.TagBannerList = res.data.list;
				})
			},
			getProductFontBackgroundColor(product){
			    if (product.hasOwnProperty("exhibitionList")){
			        return product.exhibitionList[0].fontBackgroundColor
			    }
			},
			loadImg(){
				console.log("loadImg")
			}
		}	
	}
</script>

<style>
	.indexBanner {
	    position: relative;
	}	
	.swiper-bannerContainer {
	    margin-left: auto;
	    margin-right: auto;
	    position: relative;
	    overflow: hidden;
	    list-style: none;
	    padding: 0;
	    z-index: 1;
	}
	.swiper-wrapper {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    z-index: 1;
	    display: flex;
	    transition-property: transform;
	    box-sizing: content-box;
		transform: translate3d(0px,0,0);
	}
	.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
	    bottom: 10px;
	    left: 0;
	    width: 100%;
	}
	
	.swiper-pagination {
	    position: absolute;
	    text-align: center;
	    transition: .3s opacity;
	    transform: translate3d(0,0,0);
	    z-index: 10;
	}
	.is_fixed {
	    position: -webkit-sticky;
	    position: sticky;
	    top: 0;
	    background-color: white;
	    z-index: 99;
	}
	.active {
	    font-size: 30rpx;
	    font-family: PingFang;
	    color: #029e9d;
	    font-weight: bold;
		text-align: center;
		line-height:  70rpx;
	}
	.switch-slide {
	    font-size: 30rpx;
	    font-family: PingFang;
	    color: #333333;
	    text-align: center;
	    line-height: 70rpx;
	}
	.swiper-slide {
	    flex-shrink: 0;
	    width: 100%;
	    height: 100%;
	    position: relative;
	    transition-property: transform;
	}
	.swiper-container-autoheight .swiper-wrapper {
	    align-items: flex-start;
	    transition-property: transform,height;
	}
	.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
	    height: auto;
	}
	.main {
	    padding: 17rpx 17rpx 0 17rpx;
	    background: #F7F7F7;
	}
	.main .ul {
	    display: flex;
	    justify-content: space-between;
	    flex-wrap: wrap;
	    width: 100%;
	}
	.main .ul .li {
	    width: 48.8%;
	    margin-bottom: 17rpx;
	}
	.main .ul .li .a {
	    position: relative;
	    display: block;
	    width: 100%;
	    height: 476rpx;
	    background: #FFFFFF;
	    border-radius: 11rpx;
	}
	.main .ul .li .a {
	    position: relative;
	    display: block;
	    width: 100%;
	    height: 500rpx;
	    background: #FFFFFF;
	    border-radius: 11rpx;
	}
	.main .ul .li .a image {
	    width: 100%;
	    height: 325rpx;
	    border-radius: 11rpx  0 0;
	}
	.main .ul .li .a .main-a {
	    padding: 9rpx 18rpx 15rpx 18rpx;
	}
	.main .ul .li .a .main-a .top {
	    height: 74rpx;
	    font-size: 24rpx;
	    color: #2E2D2D;
	    line-height: 37rpx;
	    word-break: break-all;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	    overflow: hidden;
	}
	.main .ul .li .a .main-a .top .top-a {
	    font-size: 18rpx;
	    width: 48rpx;
	    height: 26rpx;
	    line-height: 26rpx;
	    text-align: center;
	    color: #fff;
	    background: linear-gradient(90deg, #F63737 0%, #FF7C45 100%);
	    border-radius: 4rpx;
	    padding: 0 7rpx;
	    font-family: PingFangSC-Regular, PingFang SC;
	}
	.main .ul .li .a .main-a .top .top-b {
	    font-size: 18rpx;
	    width: 50rpx;
	    height: 26rpx;
	    line-height: 26rpx;
	    text-align: center;
	    color: #fff;
	    background: linear-gradient(90deg, #00AAA6 0%, #54D6D2 100%);
	    border-radius: 4rpx;
	    padding: 0  7rpx;
	    font-family: PingFangSC-Regular, PingFang SC;
	}
	.main .ul .li .a .main-a .bottom {
	    line-height: 41rpx;
	    margin-top: 11rpx;	
	    color: #EC2714;
	    font-family: PingFangSC-Medium, PingFang SC;
	    font-weight: 700;
		display: flex;
	}
	.main .ul .li .a .main-a .bottom .span .em {
	    font-family: PingFangSC-Medium, PingFang SC;
	    font-weight: 700;
	    font-size: 22rpx;
	}
	.hint {
	    width: 100%;
	    font-size: 11px;
	    font-weight: 500;
	    color: #8f99a7;
	    line-height: 1.4rem;
	    text-align: center;
	    /* background-color: #EBEBEB; */
	    display: inline-block;
	}
	.connaught-style .hint {
	    width: 100%;
	    font-size: 11px;
	    font-weight: 500;
	    color: #8f99a7;
	    line-height: 98rpx;
	    text-align: center;
	}
	#fall-list {
	    position: relative;
	}
	#fall-list .fall-line {
	    float: left;
	    width: 50%;
	}
	#fall-list .fall-item {
	    width: 96%;
	    background-color: #fff;
	    border-radius: 11rpx;
	    overflow: hidden;
	}
	.item-title1 {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	    padding: 0px 19rpx;
	    /* line-height: 0.93rem; */
	    /* height: 0.93rem; */
	    color: #191919;
	    font-size: 13px;
	    -webkit-line-clamp: 2;
	    margin-top: 7rpx;
	}
	.play-comment1 {
	    justify-content: flex-start;
	    padding-bottom: 42rpx;
	    margin-top: 10rpx;
	}
	.play-comment1 view {
	    margin-left: 20rpx;
	    color: #8f99a7;
	    font-size: 11px;
	}
	.play-comment1 view image {
	    width: 24rpx;
	    height: 24rpx;
	    display: inline-block;
	    vertical-align: middle;
	    margin-right: 8rpx;
	    margin-top: -7rpx;
	}
	.connaught-style .sp-module {
	    padding: 14rpx  14rpx 0;
	}
	.connaught-style .sp-module .item {
	    background-color: #ffffff;
	    border-radius: 11rpx;
	    overflow: hidden;
	    margin-bottom: 14rpx;
	}
	.connaught-style .sp-module .item .item-image {
	    position: relative;
	    /* height: 3rem; */
	    overflow: hidden;
	    display: flex;
	    align-items: center;
	    background-color: #000;
	}
	.connaught-style .sp-module .item .date {
	    position: absolute;
	    width: 91rpx;
	    height: 42rpx;
	    line-height: 42rpx;
	    background-color: rgba(0,0,0,0.5);
	    font-size: 10px;
	    z-index: 33;
	    left: 0;
	    top: 0;
	    text-align: center;
	    color: #ffffff;
	    border-radius: 6px 0px 6px 0px;
	}
	.item-title1 {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	    padding: 0px 19rpx;
	    /* line-height: 0.93rem; */
	    /* height: 0.93rem; */
	    color: #191919;
	    font-size: 13px;
	    -webkit-line-clamp: 2;
	    margin-top: 7rpx;
	}
	.connaught-style .sp-module .item .play-comment {
	    justify-content: flex-start;
	    padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.connaught-style .sp-module .item .play-comment view {
	    margin-left: 20rpx;
	    color: #8f99a7;
	    font-size: 11px;
	}
	
	.connaught-style .sp-module .item .play-comment view image {
	    width: 24rpx;
	    height: 24rpx;
	    display: inline-block;
	    vertical-align: middle;
	    margin-right: 8rpx;
	    margin-top: -7rpx;
	}
	.demandList {
	    padding: 0  28rpx;
	}
	.demandList .li {
	    background: #fff;
	    border-radius: 9rpx;
	    margin-bottom: 28rpx;
	    padding: 0 23rpx;
	}
	.demandList .li .mt {
	    overflow: hidden;
	    display: flex;
	    flex: 0 1 auto;
	    padding-top: 37rpx;
	}
	.demandList .li .mt .span {
	    padding: 0 10rpx;
	    height: 37rpx;
	    color: #fff;
	    background: #029e9d;
	    border-radius: 2rpx;
	    font-size:  18rpx;
	    margin-right: 18rpx;
	    white-space: nowrap;
	}
	.attestation {
	    width: 84rpx;
	    height: 35rpx;
	    display: inline-block;
	    vertical-align: middle;
	    margin: -3rpx 14rpx 0 0;
	}
	.demandList .li .mt .hot {
	    display: inline-block;
	    padding: 0 8rpx;
	    height: 20rpx;
	    line-height: 20rpx;
	    font-size: 13rpx;
	    color: #fff;
	    background: #fc5260;
	    border-radius: 2rpx;
	    margin-top: 8rpx;
	    vertical-align: top;
	    margin-right: 14rpx;
	    text-transform: uppercase;
	}
	.demandList .li .mt .h2 {
	    font-size: 28rpx;
	    color: #333333;
	    line-height: 30rpx;
	    width: 100%;
	}
	
	.nowrap {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.demandList .li .mt .em {
	    font-size: 22rpx;
	    color: #8f9aa8;
	    margin-left: 18rpx;
	    white-space: nowrap;
	    line-height: 30rpx;
	}
	.demandList .li .mc {
	    overflow: hidden;
	    padding: 37rpx 0;
	}

	.tag-item {
	    height: 43rpx;
	    display: inline-block;
	    justify-content: center;
	    background-color: rgba(229, 245, 245, .7);
	    border-radius: 28rpx;
	    margin-right: 19rpx;
	    margin-bottom: 7rpx;
	}
	.tag-item-text {
	    font-size: 20rpx;
	    font-family: PingFang;
	    font-weight: 500;
	    color: #029E9D;
	    opacity: 1;
	    line-height: 43rpx;
	    padding-right: 14rpx;
	    padding-left: 14rpx;
	}
	.demandList .li .mc .em {
	    float: right;
	    height: 46rpx;
	    line-height: 46rpx;
	    padding: 0 28rpx;
	    background: #029e9d;
	    border-radius: 5rpx	;
	    color: #fff;
	    font-size: 22rpx;
	}
	.demandList .li .mb {
	    font-size: 20rpx;
	    color: #c0c1cc;
	    padding-bottom: 22rpx;
	    overflow: hidden;
	}
	.demandList .li .mb .span {
	    float: left;
	}
	.demandList .li .mb .em {
	    float: right;
	}
	.swiper-container {
	    margin-left: auto;
	    margin-right: auto;
	    position: relative;
	    overflow: hidden;
	    list-style: none;
	    padding: 0;
	    z-index: 1;
	}
	.active:after {
	    content: "";
	    position: absolute;
	    bottom: 0;
	    left: 40%;
	    width: 58rpx;
	    height: 6rpx;
	    background: #029e9d;
	    margin-left: -9rpx;
	}
	.main .ul .li .a .tit-b {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 82rpx;
	    height: 26rpx;
	    font-size: 18rpx;
	    color: #FFFFFF;
	    line-height: 26rpx;
	    background: linear-gradient(90deg, #FF7C45 0%, #F63737 100%);
	    text-align: center;
	    border-radius: 13rpx 0 13rpx 0;
	}
	.main .ul .li .a .tit-a {
	    position: absolute;
	    top: 0;
	    right: 0;
	    padding: 0 11rpx;
	    height: 26rpx;
	    font-size: 18rpx;
	    color: #FFFFFF;
	    line-height: 26rpx;
	    background: #3699E6;
	    text-align: center;
	    border-radius: 13rpx 13rpx 0px 13rpx;
	}
	.scroll-view {
		height: calc(100vh - 10rpx);
	}
	
</style>